<template>
	<a-layout id="components-layout-demo-fixed" style="position: relative">
		<a-modal v-model="showTips" title="提示">
			<p>是否继续上一次课题？</p>
			<template slot="footer">
				<a-button key="back" @click="() => (showTips = false)">取消</a-button>
				<a-button type="primary" :loading="loading" @click="sureClass(0)">重新上课</a-button>
				<a-button type="primary" :loading="loading" @click="sureClass(1)">确定</a-button>
			</template>
		</a-modal>
		<!-- 暂时隐藏下课提示，因为下课的时候，没有处理sdk清空白名单事件 -->
		<!-- <a-modal v-model="showFinishCourse" title="提示">
			<p>跳转其他模块页面会导致下课？</p>
			<template slot="footer">
				<a-button key="back" @click="() => (showFinishCourse = false)">取消</a-button>
				<a-button type="primary" :loading="loading" @click="finishCourse()">确定</a-button>
			</template>
		</a-modal> -->

		<a-layout-header class="header flex flex-align-center flex-pack-justify">
			<div class="logo flex">
				<div
					class="flex flex-align-center"
					v-if="!($_has('dashboard:platform') && selectRoute.path == '/dashboard/platform')"
				>
					<div v-if="systemInfo.logUrl" style="margin-right: 10px">
						<img :src="fileUrl + systemInfo.logUrl.split(';')[0]" class="logo-img" />
					</div>
					<a-dropdown v-if="orgList.length > 1">
						<div @click="(e) => e.preventDefault()" class="flex flex-align-center">
							<span class="sys-name">{{ systemInfo.sysName || systemInfo.orgName + title }}</span>
							<a-icon type="caret-down" style="margin-left: 10px" />
						</div>
						<a-menu slot="overlay" style="max-height: 400px; overflow: auto">
							<a-menu-item @click="changeOrg(item)" v-for="(item, index) in orgList" :key="index">
								<div class="flex flex-align-center">
									<div
										v-if="item.logUrl"
										style="
											height: 30px;
											width: 30px;
											border-radius: 100%;
											overflow: hidden;
											margin-right: 5px;
										"
									>
										<img :src="fileUrl + item.logUrl.split(';')[0]" style="width: 30px" />
									</div>
									<div>{{ item.sysName || item.orgName + title }}</div>
								</div>
								<div style="color: #999; font-size: 12px">{{ item.orgName }}</div>
							</a-menu-item>
						</a-menu>
					</a-dropdown>
					<div v-else class="flex flex-align-center">
						<span class="sys-name">{{ systemInfo.sysName || systemInfo.orgName + title }}</span>
					</div>
				</div>
				<div class="mod-name flex flex-align-center" :class="{ official: isPro }">
					<img src="/img/module.png" />
					<span>{{ selectRoute ? selectRoute.meta.title : '首页' }}</span>
					<div class="topNavList">
						<a-row>
							<a-col
								:span="8"
								class="nav-item"
								@click="skipPage({ path: '/home', meta: { title: '首页' } })"
							>
								<!-- <router-link  to="/home" style="display: inline-block;width: 100%;height: 100%;"> -->
								<div class="icon"><img src="/home/icon00.png" /></div>
								<span>返回首页</span>
								<!-- </router-link> -->
							</a-col>
							<a-col
								:span="8"
								v-for="(item, index) in mixTopMenu"
								:key="index"
								class="nav-item"
								@click="skipPage(item)"
							>
								<div class="icon" v-if="item.name == 'studentManage'">
									<img src="/home/icon01.png" />
								</div>
								<div class="icon" v-if="item.name == 'answerManage'">
									<img src="/home/icon05.png" />
								</div>
								<div class="icon" v-if="item.name == 'sysManages'"><img src="/home/icon03.png" /></div>
								<div
									class="icon"
									v-if="item.name == 'doExercise' && item.meta.permissionList == 'impromptuQA'"
								>
									<img src="/home/icon04.png" />
								</div>
								<div
									class="icon"
									v-if="item.name == 'doExercise' && item.meta.permissionList == 'quiz'"
								>
									<img src="/home/icon02.png" />
								</div>
								<div
									class="icon"
									v-if="item.name == 'doExercise' && item.meta.permissionList == 'homework'"
								>
									<img src="/home/icon06.png" />
								</div>
								<span>{{ item.meta.title }}</span>
							</a-col>
						</a-row>
					</div>
				</div>
			</div>

			<div v-if="thirdMenus && thirdMenus.length > 0">
				<ul class="navs" :class="{ official: isPro }">
					<li
						@click="changthirdTabs(item)"
						:class="{ active: thirdselectKey == item.name }"
						v-for="(item, index) in thirdMenus"
						:key="index"
					>
						<router-link :to="item.path" active-class="active">{{
							item.meta ? item.meta.title : ''
						}}</router-link>
					</li>
				</ul>
			</div>
			<div class="right-pro flex">
				<!-- <router-link class="re-home flex flex-align-center" to="/home" >
					<img src="/img/re-home.png" />
					<span>返回首页</span>
				</router-link> -->
				<a-space :size="30" style="margin-right: 30px">
					<router-link
						v-if="$_has('dashboard:classboard') && selectRoute.path != '/dashboard/classboard'"
						to="/dashboard/classboard"
						class="flex flex-align-center"
						style="color: #fff; font-size: 18px"
						><!-- <img src="/count/school.png" alt="" srcset="" style="width: 24px; margin-right: 5px" /> -->
						<span>班级看板</span></router-link
					>
					<router-link
						v-if="$_has('dashboard:workplace') && selectRoute.path != '/dashboard/workplace'"
						to="/dashboard/workplace"
						class="flex flex-align-center"
						style="color: #fff; font-size: 18px"
						><!-- <img src="/count/school.png" alt="" srcset="" style="width: 24px; margin-right: 5px" /> -->
						<span>学校看板</span></router-link
					>
					<router-link
						v-if="$_has('dashboard:platform') && selectRoute.path != '/dashboard/platform'"
						to="/dashboard/platform"
						style="color: #fff; font-size: 18px"
						class="flex flex-align-center"
						><!-- <img src="/count/platform.png" alt="" srcset="" style="width: 24px; margin-right: 5px" /> --><span
							>数据中心</span
						></router-link
					>
					<router-link
						v-if="$_has('dashboard:device') && selectRoute.path != '/dashboard/device'"
						to="/dashboard/device"
						style="color: #fff; font-size: 18px"
						class="flex flex-align-center"
						><!-- <img src="/count/device.png" alt="" srcset="" style="width: 20px; margin-right: 5px" /> -->
						<span>设备看板</span></router-link
					>
				</a-space>
				<a
					href="javascript:;"
					class="re-home flex flex-align-center"
					@click="skipPage({ path: '/home', meta: { title: '首页' } })"
				>
					<img src="/img/re-home.png" />
					<span>返回首页</span>
				</a>

				<div class="userInfo">
					<a-dropdown class="ml50" placement="bottomRight">
						<a href="javascript:;">
							<img src="/img/avatar.png" class="avatar" />
							<span class="username">
								{{ userInfo.realName }}
								<a-icon type="down" />
							</span>
						</a>
						<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
							<a-menu-item key="1">
								<router-link to="/userinfo"><span>个人信息</span></router-link>
							</a-menu-item>
							<a-menu-divider />
							<a-menu-item key="4">
								<a href="javascript:;" @click="handleLogout()"><span>退出登录</span></a>
							</a-menu-item>
						</a-menu>
					</a-dropdown>
				</div>
			</div>
		</a-layout-header>
		<a-layout-content style="position: absolute; top: 60px; left: 0; right: 0; bottom: 0">
			<div class="flex flex-v pro-grid-content flex-1" style="background-color: #f6f8fb">
				<!-- :style="{'width':secondMenus&&secondMenus.length>0?'1600px':'1440px'}" -->
				<div
					class="flex"
					:class="[
						secondMenus && secondMenus.length > 0 ? 'sys-mainWidth' : 'mainWidth',
						selectRoute.path.indexOf('dashboard') > -1 ? 'fullmainWidth' : '',
					]"
					style="margin: 0 auto; min-height: calc(100vh - 60px); height: calc(100vh - 60px)"
				>
					<div class="left-menu" v-if="secondMenus && secondMenus.length > 0">
						<!-- <ul>
							<li @click="changeTabs(subItem)" v-for="(subItem, subIndex) in secondMenus" :key="subIndex">
								<a :to="subItem.name" :class="{ active: subItem.name == secondselectKey }" active-class="active">
									<span>{{ subItem.meta.title }}</span>
								</a>
							</li>
						</ul> -->
						<a-menu v-model="secondselectKey">
							<template v-for="(item, index) in secondMenus">
								<a-sub-menu
									:key="item.name"
									:title="item.meta.title"
									v-if="item.children && item.children.length > 0"
								>
									<a-menu-item
										:key="subItem.name"
										@click="changeTabs(subItem)"
										v-for="(subItem, subIndex) in item.children"
									>
										<div class="menu-item">{{ subItem.meta.title }}</div>
									</a-menu-item>
								</a-sub-menu>
								<a-menu-item v-else :key="item.name" @click="changeTabs(item)">
									<div class="menu-item">{{ item.meta.title }}</div>
								</a-menu-item>
							</template>
						</a-menu>
					</div>
					<div
						class="mainWidth flex-1"
						:class="{
							fullmainWidth: selectRoute.path.indexOf('dashboard') > -1,
						}"
					>
						<!-- <router-view /> -->
						<route-view></route-view>
					</div>
				</div>
			</div>
		</a-layout-content>
	</a-layout>
</template>

<script>
import { i18nRender } from '@/locales';
import { mapState, mapActions, mapMutations } from 'vuex';
import defaultSettings from '@/config/defaultSettings';
import { updateTheme } from '@/pro-layout/utils/dynamicTheme';
import RouteView from './RouteView';
import { sysManageapi } from '@/api/index.js';
import { upLoginCache } from '@/api/index';
export default {
	name: 'BasicLayout',
	components: {
		RouteView,
	},
	data() {
		return {
			// preview.pro.antdv.com only use.
			isProPreviewSite: process.env.VUE_APP_PREVIEW === 'true' && process.env.NODE_ENV !== 'development',
			// end
			isDev: process.env.NODE_ENV === 'development' || process.env.VUE_APP_PREVIEW === 'true',

			// base
			menus: [],

			title: defaultSettings.title,
			mixTopMenu: [],
			// userInfo: {},
			fileUrl: process.env.VUE_APP_FILE_API,
			moduleTitle: '',
			secondMenus: [], //二级菜单
			secondselectKey: '',
			thirdMenus: [], //三级菜单
			thirdselectKey: '',
			orgList: [], //该账户所属机构
			selectRoute: null,
			oldfullPath: '',

			//上课信息为了快捷进入上课发题
			startClassInfo: {},
			showTips: false,
			showFinishCourse: false,
			loading: false,
			skipPageData: {},
		};
	},
	computed: {
		...mapState({
			// 动态主路由
			mainMenu: (state) => state.permission.routers,
			activePage: (state) => state.activePage,
			userInfo: (state) => state.user.userinfo || {},
			systemInfo: (state) => state.globalOrg || {},
			deviceType: (state) => state.websockStore.deviceType,
			hostname: (state) => state.hostname,
			isPro: (state) => state.isPro,
		}),
	},
	mounted() {
		updateTheme(this.isPro ? '#5697f5' : defaultSettings.primaryColor);
	},
	watch: {
		isPro(newValue, oldValue) {
			if (newValue != oldValue) {
				updateTheme(newValue ? '#5697f5' : defaultSettings.primaryColor);
			}
		},
		activePage(newval, oldval) {
			/* console.log("当前菜单"+JSON.stringify(this.activePage))
				console.log("浏览器地址："+JSON.stringify(window.location.hash))
				let curPath=window.location.hash.split('#')[1]; */
			// this.selectRoute = this.$ls.get('selectModule');
			/* console.log("当前路由"+JSON.stringify(this.selectRoute))
				console.log("模块菜单"+JSON.stringify(this.mixTopMenu)) */
			let secondMenus = [];
			if (this.activePage) {
				let info = this.mixTopMenu.find((item) => item.name == this.activePage);
				secondMenus = info ? info.children : [];
			}
			if (secondMenus && secondMenus.length > 0) {
				//二级菜单
				this.secondMenus = secondMenus.filter((item) => !item.hidden);
				/* 过滤三级菜单 */
				this.secondMenus.forEach((item) => {
					if (item.children && item.children.length > 0) {
						item.children = item.children.filter((subitem) => !subitem.hidden);
					}
				});
			} else {
				this.secondMenus = [];
			}
		},
		$route: {
			handler(to, from) {
				console.log('基础布局任务列表变化：', to, from);
				if (from && to.path == from.path) {
					this.oldfullPath = from.fullPath;
				} else {
					this.oldfullPath = '';
				}
				let curPath = window.location.hash.split('#')[1];
				console.log('啥玩意' + JSON.stringify(to.name));
				let secondselectKey = this.$ls.get('secondselectKey') || '';
				this.selectRoute = { path: to.path, meta: { title: to.meta.title } };
				//特别处理
				if (
					(to.name == 'examqslist' && secondselectKey == 'analysis') ||
					to.name == 'userinfo' ||
					to.name == 'examqslist' ||
					to.name == 'studentManage' ||
					to.fullPath.includes('/sysManage')
				) {
					secondselectKey = '';
				}

				if (to.name == 'classreport' || to.name == 'gradereport') {
					secondselectKey = 'analysis';
					this.thirdMenus = this.getThirdMenu(this.mainMenu, secondselectKey);
					console.log('三级菜单thirdMenus：' + JSON.stringify(this.thirdMenus));
					if (this.thirdMenus && this.thirdMenus.length > 0) {
						this.thirdselectKey = this.thirdMenus[0].name;
					} else {
						this.thirdMenus = [];
						this.thirdselectKey = '';
					}
				}
				// if (to.name == 'subjectlist' || to.name == 'classlist' || to.name == 'grade') {
				// 	secondselectKey = 'baseInfo';
				// }

				//console.log("二级菜单secondselectKey："+JSON.stringify(secondselectKey))
				this.thirdMenus = [];
				this.thirdselectKey = '';
				if (secondselectKey == 'analysis') {
					this.thirdMenus = this.getThirdMenu(this.mainMenu, secondselectKey);
					if (this.thirdMenus && this.thirdMenus.length > 0) {
						this.thirdselectKey = this.thirdMenus[0].name;
					}
				}
				if (secondselectKey) {
					this.secondselectKey = [secondselectKey];
				} else {
					secondselectKey = this.getName(this.mainMenu, curPath);
					if (!secondselectKey) {
						secondselectKey = to.name;
					}
					this.secondselectKey = [secondselectKey];
				}
				// if(secondselectKey=='workplace'){
				// 	secondselectKey
				// }
				console.log('这里secondselectKey：', secondselectKey);
				console.log('这里this.secondselectKey：', this.secondselectKey);
				this.$ls.set('secondselectKey', secondselectKey);
				if (to.path.indexOf('dashboard') > -1) {
					console.log('daozheliema', to);
					this.secondMenus = [];
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true, // 开启深度监听
		},
	},
	created() {
		this.getAllMenu();
		this.getUserInfo();
	},
	methods: {
		...mapActions(['Logout', 'GetInfo']),
		...mapMutations([
			'SET_GLOBALORG',
			'SET_tempTestData',
			'SET_isAnswering',
			'SET_STOPDEVICEEVENTLIST',
			'SET_WHITELIST',
		]),
		i18nRender,
		//获取所有菜单
		getAllMenu() {
			/* 获取路由 */
			this.menus = [...this.mainMenu];
			this.mixTopMenu = this.mainMenu.filter((item) => !item.hidden && item.meta.title != '首页');
			/* 如果没有菜单。提示账户没有权限 */
			if (this.menus.length == 0) {
				this.$message.error('你还没有分配权限，请联系管理员');
			}
		},
		//获取当前菜单name
		getName(arr, path) {
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].path == path) {
					return arr[i].name;
				} else if (Array.isArray(arr[i].children)) {
					const result = this.getName(arr[i].children, path);
					if (result) {
						return result;
					}
				}
			}
		},
		//遍历获取三级菜单数组
		getThirdMenu(arr, name) {
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].name == name) {
					return arr[i].children && arr[i].children.length > 0
						? arr[i].children.filter((item) => !item.hidden)
						: arr[i].children;
				} else if (Array.isArray(arr[i].children)) {
					const result = this.getThirdMenu(arr[i].children, name);
					if (result) {
						return result;
					}
				}
			}
		},
		getUserInfo() {
			this.$postAction(this.$api.getUserInfo).then((da) => {
				let data = da.data;
				this.$ls.set('userInfo', data);
				this.GetInfo(data);
				this.getAllOrgList();
			});
		},
		//获取所有机构
		getAllOrgList() {
			this.$postAction(sysManageapi.orgUrl.getAllList).then((da) => {
				let data = da.data;
				this.orgList = [...da.data];
				// this.systemInfo = this.orgList[0];
				if (this.userInfo.userType == '06') {
					let info = this.orgList.find((item) => item.orgId == this.userInfo.orgId);
					this.SET_GLOBALORG(info || this.orgList[0]);
				} else {
					if (!this.systemInfo || Object.keys(this.systemInfo).length == 0) {
						this.SET_GLOBALORG(this.orgList[0]);
					} else {
						let info = this.orgList.find((item) => item.orgId == this.systemInfo.orgId);
						this.SET_GLOBALORG(info || this.orgList[0]);
					}
				}
			});
		},
		//布局为mixmenu时才有的头部菜单tab切换
		changTab(value) {
			this.selectkey = value;
			this.mixTopMenu.forEach((item, index) => {
				if (this.selectkey == item.name) {
					this.menus = item.children;
				}
			});
			// localStorage.setItem('selectkey', value);
		},
		//切换三级菜单
		changthirdTabs(item) {
			this.thirdselectKey = item.name;
			if (this.oldfullPath) {
				this.$router.replace(this.oldfullPath);
			}
			this.$forceUpdate();
			console.log('三级菜单thirdselectKey' + JSON.stringify(item));
		},
		//切换二级菜单
		changeTabs(item) {
			this.secondselectKey = [item.name];
			this.$ls.set('secondselectKey', item.name);
			//三级菜单
			// this.thirdMenus = this.getThirdMenu(this.mainMenu, this.secondselectKey);
			// if (this.thirdMenus && this.thirdMenus.length > 0) {
			// 	this.thirdselectKey = this.thirdMenus[0].name;
			// } else {
			// 	this.thirdMenus = [];
			// 	this.thirdselectKey = '';
			// }
			this.$router.push(item.path);
		},
		//退出
		handleLogout() {
			let $me = this;
			this.$confirm({
				title: '你确定要退出吗？',
				content: '',
				okText: '确定',
				cancelText: '取消',
				class: 'confirmbox',
				okType: 'danger',
				onOk() {
					/* 退出，清空token就可以 */
					$me.Logout().then(() => {
						// $me.$router.push({
						// 	path: '/user/login'
						// });
						/* 刷新页面，清除tore */
						window.location.reload();
					});
				},
				onCancel() {
					console.log('Cancel');
				},
			});
		},
		//跳转模块页面
		async skipPage(item) {
			let beginClassData = this.$ls.get('beginClass');
			/* 暂时隐藏这段逻辑，因为下课的处理sdk有问题 */
			/* 
			if (beginClassData && Object.keys(beginClassData).length > 0 && beginClassData.isBegin) {
				this.skipPageData = { ...item };
				this.showFinishCourse = true;
				return;
			} */
			this.beforeStartClass(item);
		},
		async beforeStartClass(item) {
			let startClassInfo = this.$ls.get('startClassInfo');
			//上课信息
			this.startClassInfo =
				!startClassInfo || Object.keys(startClassInfo).length == 0
					? {}
					: {
							...startClassInfo,
					  };
			this.$ls.set('selectModule', item);
			let parameter = {
				path: item.path,
				name: item.name,
			};
			this.topicType = 0;
			let testType = 0;
			this.skipRoute = {
				...parameter,
			};
			if (item.name == 'doExercise') {
				await this.findCourseOne(1);
				if (!this.startClassInfo.classId) {
					this.$message.error('请选择作答班级！');
					return;
				}
				if (!this.startClassInfo.subjectCode) {
					this.$message.error('请选择科目！');
					return;
				}
				/* 如果是无线上课前重新获取一遍接收器在线状态 */
				if (this.deviceType != 'wired') {
					await this.getclassOnline();
				}
				let _this = this;
				/**如果是班级已经上课，提示正在上课**/
				if (this.startClassInfo.isOnClass == 1) {
					let msg = this.startClassInfo.gradeName + this.startClassInfo.className;
					this.$confirm({
						title: '【' + msg + '】已经在上课中！',
						content: '继续上课，将会影响' + '【' + msg + '】学生答题，请谨慎操作！',
						okText: '取消',
						cancelText: '继续',
						onOk() {
							return;
						},
						onCancel() {
							_this.showSecondsTips(item, testType, parameter);
						},
					});
				} else {
					this.showSecondsTips(item, testType, parameter);
				}
			} else {
				if (item.path == '/home') {
					this.$router.replace(item.path);
					//清空缓存的路由数据
					this.$store.dispatch('setView', []);
				} else {
					this.$router.push({
						name: item.name,
						params: {
							...parameter,
						},
					});
				}
			}
		},
		/* 二次提醒 */
		async showSecondsTips(item, testType, parameter) {
			/**
			 * 点击模块知道跳转后的答题模块
			 */
			if (item.meta.permissionList == 'impromptuQA') {
				this.topicType = 0;
				/* 如果有csId，则弹框提示是否继续上次课题 */
				if (this.startClassInfo.csId) {
					this.showTips = true;
					return;
				}
			} else if (item.meta.permissionList == 'quiz') {
				this.topicType = 99;
				testType = 0;
			} else if (item.meta.permissionList == 'homework') {
				this.topicType = 99;
				testType = 1;
			}
			if (this.loading) {
				return;
			}
			/**
			 * topicType:试题类型：临时题（0,1,2,5）、随堂检测、课后作业（99）
			 * testType：0：随堂检测，1：课后作业
			 */
			let isHasSuccessAttend = await this.startClass(this.topicType, testType);
			console.log('上课是否成功isHasSuccessAttend' + JSON.stringify(isHasSuccessAttend));
			//如果成功上课才能跳转页面，才能报错用户可以正常下课
			if (isHasSuccessAttend) {
				this.$router.push({
					name: item.name,
					params: {
						...parameter,
					},
				});
			}
		},
		//下课
		async finishCourse() {
			let beginClassData = this.$ls.get('beginClass');
			let parameter = {
				csId: beginClassData ? beginClassData.csId : '',
				isWire: this.deviceType == 'wired' ? 1 : 0,
			};
			let testType = null;
			let startTime = new Date().getTime();

			//清空数据缓存
			this.clearStorage();
			//如果没有csId，也允许用户下课，不走下课接口
			if (!beginClassData || !beginClassData.csId) {
				this.beforeStartClass(this.skipPageData);
				this.showFinishCourse = false;
			}
			return this.$postAction(this.$sysManageapi.courseUrl.endClass, parameter).finally(() => {
				this.beforeStartClass(this.skipPageData);
				this.showFinishCourse = false;
			});
		},

		//清空缓存
		clearStorage() {
			this.SET_isAnswering(0);
			this.$ls.remove('beginClass'); //是否上课
			this.$ls.remove('importTopic'); //课件当前题
			this.$ls.remove('leftOperateData'); //左侧操作数据，主要用于是否刷卡绑定
			this.$ls.remove('tempTestData'); //临时题
			this.$ls.remove('testData'); //答题测试
			this.curMenu = ''; //左侧操作页面组件
			this.$ls.remove('tempTopicData'); //临时题已发题号
			this.$ls.remove('testComponet'); //套题页面组件
			localStorage.removeItem('tempsdTestQuestId'); //临时题发题id
			localStorage.removeItem('sdTestQuestId'); //套题发题id
			localStorage.removeItem('tempsendTime'); //临时题发题时间
			localStorage.removeItem('answerTime'); //套题发题时间
			sessionStorage.setItem('isHasWxLoginTips', ''); //是否有小程序控制pc端提示
			this.SET_WHITELIST([]); //清空白名单
			this.SET_STOPDEVICEEVENTLIST([]);
		},
		//获取无线接收器在线状态
		getclassOnline() {
			this.$postAction(this.$sysManageapi.classUrl.getclassOnline, {
				classId: this.startClassInfo.classId,
			}).then((res) => {
				if (res && res.code == 1) {
					this.startClassInfo.online = res.data.online;
					this.startClassInfo.isOnClass = res.data.isOnClass;
					sessionStorage.setItem('startClassInfo', JSON.stringify(this.startClassInfo));
					//存到ios_startClassInfo 中
					this.$ls.set('startClassInfo', this.startClassInfo);
					if (this.startClassInfo.online != 1) {
						this.$message.error('设备未连接！');
						return;
					}
				}
			});
		},
		//获取该账号最近一次上课记录
		findCourseOne(value) {
			let params = {};
			if (value) {
				params = {
					subjectCode: this.startClassInfo.subjectCode,
					classId: this.startClassInfo.classId,
				};
			}
			return this.$postAction(this.$sysManageapi.courseUrl.findCourseOne, params).then((res) => {
				if (res && res.code == 1) {
					if (res.data) {
						for (var key in this.startClassInfo) {
							this.startClassInfo[key] = res.data[key];
						}
					} else {
						this.startClassInfo = {
							className: this.startClassInfo.className || '',
							classId: this.startClassInfo.classId || '',
							subjectCode: this.startClassInfo.subjectCode || '',
							subjectName: this.startClassInfo.subjectName || '',
							gradeId: this.startClassInfo.gradeId || '',
							gradeName: this.startClassInfo.gradeName || '',
							title: '',
							csId: '',
							//"topicType": 0,
							deptId: this.startClassInfo.deptId || '',
							testQuestId: null,
							//"tabType": "1",
							topicId: '',
							machId: this.startClassInfo.machId || '',
							online: this.startClassInfo.online || 0,
							isOnClass: this.startClassInfo.isOnClass || 0,
							alias: this.startClassInfo.alias || '',
						};
					}

					console.log('数据' + JSON.stringify(res));
				}
			});
		},
		/* 切换机构 */
		changeOrg(item) {
			// this.systemInfo = { ...item };
			upLoginCache(item.orgId)
				.then((da) => {
					this.SET_GLOBALORG(item);
				})
				.finally(() => {});

			// this.getAllMenu();
		},
		//确定开始上课
		startClass(topicType, testType, operateType = 0) {
			this.loading = true;
			let paramter = Object.assign(
				{},
				{
					isWire: this.deviceType == 'wired' ? 1 : 0,
				},
				this.startClassInfo
			);
			if (operateType == 0) {
				paramter.title = this.startClassInfo.subjectName + moment().format('YYYY-MM-DD hh:mm:ss');
			}
			return new Promise((resolve, reject) => {
				this.$postAction(this.$sysManageapi.courseUrl.startClass, paramter)
					.then((res) => {
						//return this.$postAction(this.$sysManageapi.courseUrl.startClass, paramter).then(res => {
						if (res && res.code == 1) {
							console.log('开始上课返回数据' + JSON.stringify(res));
							let {
								classId,
								className,
								gradeId,
								gradeName,
								subjectCode,
								subjectName,
								title,
								csId,
								deptId,
								alias,
							} = this.startClassInfo;
							let params = Object.assign(
								{},
								{
									classId,
									className,
									gradeId,
									gradeName,
									subjectCode,
									subjectName,
									title,
									csId,
									deptId,
									alias,
								},
								{
									testQuestId: res.data.testQuestId, //试题id

									csId: res.data.csId, //课题id
									topicId: res.data.topicId
										? res.data.topicId != 'null'
											? res.data.topicId
											: ''
										: '', //当前题号
								}
							);
							if (res.data.testQuestId) {
								params.topicType = 100;
							} else {
								params.topicType = topicType || 0;
							}
							//如果是答题测试
							if (topicType == 99) {
								/**
								 * testType：0：随堂检测，1：课后作业
								 */
								//params.testType = testType;
							}
							this.$ls.set('testData', { testType });
							//存储上课必须数据
							this.$ls.set(
								'beginClass',
								Object.assign({}, params, {
									isBegin: true,
								})
							);

							resolve(res.code);
						} else {
							resolve();
						}
					})
					.catch((err) => {
						//返回错误
						reject(err);
					})
					.finally((res) => {
						setTimeout(() => {
							this.loading = false;
						}, 200);
					});
			});
		},
		//确定上课
		async sureClass(value) {
			if (this.loading) {
				return;
			}
			this.showTips = false;
			let isHasSuccessAttend = await this.startClass(this.topicType, 0, value);
			console.log('上课是否成功isHasSuccessAttend' + JSON.stringify(isHasSuccessAttend));
			//如果成功上课才能跳转页面，才能报错用户可以正常下课
			if (isHasSuccessAttend) {
				this.$router.push({
					name: this.skipRoute.name,
					params: {
						...this.skipRoute,
					},
				});
			}
		},
	},
};
</script>
<style scoped lang="less">
.mainWidth {
	width: 1440px;

	@media screen and (max-width: 1680px) {
		width: 1200px;
	}
}

.sys-mainWidth {
	width: 1600px;

	@media screen and (max-width: 1680px) {
		width: 1360px;
	}

	@media screen and (max-width: 1366px) {
		width: 1200px;
	}
}
.fullmainWidth {
	width: 100%;
}
/deep/.ant-layout {
	background: transparent !important;
}

.header {
	position: fixed;
	z-index: 999;
	width: 100%;
	background: @primary-color;
	padding: 0 25px;
	// -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	// box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

	ul.navs {
		margin: 0 auto;
		max-width: 1440px;
		height: 60px;
		text-align: center;
		padding-left: 0;

		li {
			float: left;
			display: inline-block;
			height: 100%;
			line-height: 60px;
			text-decoration: none;
			/* border-bottom: 3px solid transparent; */
			color: #fff;

			a {
				display: inline-block;
				height: 100%;
				line-height: 60px;
				padding: 0 20px 0 20px;
				text-decoration: none;
				font-size: 18px;
				// border-bottom: 3px solid transparent;
				color: #fff;

				&:hover {
					background: #01a8ae;
					color: #fff;
				}
			}
		}

		li a.active {
			background: #01a8ae;
			color: #fff;
		}
		&.official {
			li a.active {
				background: #5677f5;
			}
		}
	}
}

.head-menu {
	// width: 800px;
	text-align: center;
	margin: 0 auto;
	line-height: 64px;
}

.right-pro {
	.re-home {
		color: #fff;
		cursor: pointer;

		i {
			font-size: 24px;
			vertical-align: -0.22em;
		}

		img {
			width: 26px;
			height: 22px;
			// margin-top: -3px;
		}

		span {
			margin-left: 7px;
			font-size: 18px;
		}
	}

	/deep/.userInfo {
		.avatar {
			width: 28px !important;
			height: 28px !important;
			border-radius: 50%;
			// background: #fff;
			border: 1px solid @primary-color;
			cursor: pointer;

			i {
				color: @primary-color;
			}

			&.bg {
				//background: url('../assets/images/home/touxiang.jpg') center center no-repeat;
				background-size: 100% auto;
			}
		}

		.username {
			color: #fff;
			margin-left: 10px;
		}
	}
}

/deep/.logo {
	color: #fff;

	.logo-img {
		height: 36px;
		width: auto;
		margin-top: -3px;
	}

	.sys-name {
		color: #fff;
		font-size: 18px;
		margin-left: 7px;
	}

	.mod-name {
		color: #fff;
		margin-left: 78px;
		padding: 0 10px;
		cursor: pointer;
		position: relative;

		i {
			font-size: 24px;
			vertical-align: -0.22em;
		}

		img {
			width: 26px;
			height: 23px;
		}

		span {
			margin-left: 7px;
			font-size: 18px;
		}

		.topNavList {
			position: absolute;
			display: none;
			width: 360px;
			background-color: #fff;
			top: 60px;
			left: 0;
			z-index: 98;
			box-shadow: 0 0 40px 1px #ff000014;

			.nav-item {
				width: 100px;
				height: 100px;
				text-align: center;
				margin: 10px;
				cursor: pointer;
				transition: all 0.3s;

				&:hover {
					background-color: rgba(0, 190, 197, 0.2);
				}
				&.official {
					background-color: rgba(86, 151, 245, 0.2);
				}
				.icon {
					display: block;
					width: 40px !important;
					height: 40px !important;
					overflow: hidden;
					margin: 10px auto 0;

					img {
						width: 100%;
						height: auto;
					}
				}

				span {
					color: #383838;
				}
			}
		}

		&:hover {
			background-color: #01a8ae;
			.topNavList {
				display: block;
			}
		}
		&.official {
			&:hover {
				background-color: #5677f5;
			}
		}
	}
}

.ml50 {
	margin-left: 50px;
}

/* 底部样式 */
/deep/.ant-layout-footer {
	padding: 0;
}

/deep/.left-menu {
	width: 160px;
	display: inline-block;
	margin: 15px 0;
	overflow: auto;

	ul {
		width: 125px;
		background-color: #fff;
		border-radius: 8px;
		margin-left: 21px;
		padding: 23px 0;
		box-shadow: 0px 4px 8px rgba(19, 29, 53, 0.02);

		li {
			display: inline-block;
			width: 100%;
			text-align: center;
			margin-bottom: 0 !important;

			.menu-item,
			.ant-menu-submenu-title {
				display: block;
				color: #2e2424;
				font-size: 16px;
				// width: 75px;
				height: 36px;
				line-height: 36px;
				border-radius: 4px;
			}

			.menu-item:hover,
			.ant-menu-submenu-title:hover {
				color: @primary-color;
			}
			&.ant-menu-item-selected {
				background-color: transparent;
			}
			&.ant-menu-item-selected .menu-item,
			&.ant-menu-submenu-selected .menu-item {
				background-color: @primary-color;
				color: #fff;
			}

			&.ant-menu-submenu-selected .ant-menu-submenu-title {
				color: @primary-color;

				.ant-menu-submenu-arrow:before,
				.ant-menu-submenu-arrow:after {
					color: @primary-color;
					background-image: linear-gradient(to right, @primary-color, @primary-color);
				}
			}
		}
		li:hover {
			&.ant-menu-item-selected .menu-item {
				background-color: @primary-color!important;
				color: #fff !important;
			}
		}
	}
}
</style>
